<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="200px">
      <el-form-item label="账号区域范围">
      <el-select v-model="form.province"  placeholder="请选择省份" style="margin-right:3px;">
      	    <el-option
      v-for="item in provinceList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      <el-select v-model="form.city"  placeholder="请选择城市" style="margin-right:3px;">
      	    <el-option
      v-for="item in cityList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      <el-select v-model="form.county"  placeholder="请选择县市" style="margin-right:3px;">
      	    <el-option
      v-for="item in countyList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      <el-select v-model="form.school"  placeholder="请选择学校">
      	    <el-option
      v-for="item in schoolList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="所在项目/用户">
      			<span class="fieldLabel">所在项目</span>
      <el-select v-model="form.activityId"  placeholder="请选择活动" style="margin-right:3px;">
      	    <el-option
      v-for="item in activityList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      			<span class="fieldLabel">所属用户</span>
      <el-select v-model="form.activityUserId"  placeholder="请选择用户">
      	    <el-option
      v-for="item in activityUserList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="类别/组别">
      			<span class="fieldLabel">所属类别</span>
        <el-select v-model="form.belongClassType" placeholder="请选择所属类别">
        	<el-option 
        	 v-for="(v,k) in belongClassTypes" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      			<span class="fieldLabel">所属组别</span>
        <el-select v-model="form.belongGroup" placeholder="请选择所属组别">
        	<el-option 
        	 v-for="(v,k) in belongGroups" 
        	 :label="v.label" 
        	 :value="v.value"	
        	 :key="v.key">
        	</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onRefresh">刷新</el-button>
      </el-form-item>
    </el-form>
  	<el-row :gutter="20">
  		<el-col :span="6">
		    <el-card shadow="always">
		       作品总数：<el-tag type="success">100000</el-tag>
		    </el-card>
  		</el-col>
  		<el-col :span="6">
		    <el-card shadow="always">
		       已审核：<el-tag type="success">5000</el-tag>
		    </el-card>
  		</el-col>
  		<el-col :span="6">
		    <el-card shadow="always">
		       已推送：<el-tag type="success">3000000</el-tag>
		    </el-card>
  		</el-col>
  		<el-col :span="6">
		    <el-card shadow="always">
		       待审核：<el-tag type="success">5600000</el-tag>
		    </el-card>
  		</el-col>
  	</el-row>
<el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row style="margin-top:10px;"
    >
      <el-table-column align="center" label="序号" width="65">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="文档名称" align="center">>
        <template slot-scope="scope">
          {{ scope.row.filename }}
        </template>
      </el-table-column>
      <el-table-column label="文件类型" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.filetype }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="文件大小" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.filesize }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="是否缴费" width="110" align="center">
        <template slot-scope="scope">
<el-switch
  :value="scope.row.feestatus|yesnoFilter"
  disabled>
</el-switch>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="是否推送" width="110" align="center">
        <template slot-scope="scope">
<el-switch
  :value="scope.row.ispushreviewgroup|yesnoFilter" 
  disabled>
</el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="发布日期" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
    </el-table>
<el-dialog
  title="提示"
  :visible.sync="onlineScanDialogShow"
  width="30%"
  :show-close="false">
  <span>在线扫描</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleOnlineScanDialogClose">取 消</el-button>
    <el-button type="primary" @click="handleOnlineScanDialogClose">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  filters: {
  	yesnoFilter(v){
  		return v==1?true:false;
  	},	
    statusFilter(status) {
      const statusMap = {
        notstart: 'success',
        playing: 'gray',
        end: 'danger'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        notstart: '未开始',
        playing: '进行中',
        end: '已结束'
      }
      return statusMap[status]
    },
  },
  data() {
    return {
    	totalreviewsize:19000000,
    	waitreviewsize:19000000,
    	waitreviewdocumentsize:19000000,
    	onlineScanDialogShow:false,
	  provinceList:[{label:"湖南省",value:"湖南省"}],
	  cityList:[{label:"湘西土家族苗族自治州",value:"湘西土家族苗族自治州"}],
	  countyList:[{label:"吉首市",value:"吉首市"}],
	  schoolList:[
	    	 {label:"第一中学",value:"第一中学"},
	    	 {label:"第二中学",value:"第二中学"},
	    	 {label:"第三中学",value:"第三中学"}
	  ],
    	belongClassTypes:[
    	{value:"论文类",label:"论文类",key:"论文类"},
    	{value:"案例类",label:"案例类",key:"案例类"},
    	{value:"科技创新类",label:"科技创新类",key:"科技创新类"},
    	{value:"书法类",label:"书法类",key:"书法类"},
    	{value:"作文类",label:"作文类",key:"作文类"}
    	],
    	belongGroups:[
    	{value:"普通组",label:"普通组",key:"普通组"},
    	{value:"中等组",label:"中等组",key:"中等组"},
    	{value:"高级组",label:"高级组",key:"高级组"}
    	],
    	activityList:[
    	{value:"这是测试活动1",label:"这是测试活动1",key:"这是测试活动1"},
    	{value:"这是测试活动2",label:"这是测试活动2",key:"这是测试活动2"},
    	{value:"这是测试活动3",label:"这是测试活动3",key:"这是测试活动3"},
    	],
    	activityUserList:[
    	{value:"测试活动用户1",label:"测试活动用户1",key:"测试活动用户1"},
    	{value:"测试活动用户2",label:"测试活动用户2",key:"测试活动用户2"},
    	{value:"测试活动用户3",label:"测试活动用户3",key:"测试活动用户3"},
    	],
      form: {
      	province:'',
        city: '',
        county:'',
        school:'',
        belongClassType:'',
        belongGroup:'',
        activityId:'',
        activityUserId:''
      },
      listLoading: false,
      list:[
      {filename:"这是一份测试作品1",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:1,filetype:"Word",filesize:"100MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品2",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:1,ffiletype:"Excel",filesize:"300MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品3",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:0,ffiletype:"EXE",filesize:"200MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品4",departname:"",feestatus:0,reviewstatus:'',ispushreviewgroup:1,ffiletype:"TXT",filesize:"500MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品5",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:1,ffiletype:"JPG",filesize:"200MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品6",departname:"",feestatus:0,reviewstatus:'',ispushreviewgroup:0,ffiletype:"PNG",filesize:"800MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品7",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:1,ffiletype:"PPT",filesize:"400MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品8",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:1,ffiletype:"MP3",filesize:"200MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品9",departname:"",feestatus:0,reviewstatus:'',ispushreviewgroup:0,ffiletype:"MP4",filesize:"430MB",created_at:"2024-10-30 12:00:00"},
      {filename:"这是一份测试作品10",departname:"",feestatus:1,reviewstatus:'',ispushreviewgroup:1,ffiletype:"ZIP",filesize:"30MB",created_at:"2024-10-30 12:00:00"},
      ]
    }
  },
  methods: {	
    onSubmit() {
      this.$message('submit!')
    },
    onRefresh() {
      this.$message({
        message: 'refresh!',
        type: 'warning'
      })
    },
    onChangeUploadMode(v){
    	console.log("onChangeUploadMode=",v)
    	if(v=="在线扫描")
    	this.onlineScanDialogShow=true;
    },
    handleOnlineScanDialogClose(){
    	console.log("handleOnlineScanDialogClose")
    	this.form.uploadMode='';
    	this.onlineScanDialogShow=false;
//  	this.$nextTick(()=>{
//  	 this.$forceUpdate();
//  	})
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

